﻿<!DOCTYPE html>
<html>

<head>
  <title>Forge Extensions</title>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico">
  <!-- Common packages: jQuery, Bootstrap, jsTree -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
  <!-- Autodesk Forge Viewer files -->
  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
  <!-- this project files -->
  <link rel="stylesheet" type="text/css" href="css/w2ui-1.4.min.css" />
  <link href="css/main.css" rel="stylesheet" />
  <link href="extensions/extensionloader.css" rel="stylesheet" />
  <script src="js/ForgeTree.js"></script>
  <script src="js/ForgeViewer.js"></script>
  <script src="/extensions/extensionloader.js"></script>
  <!-- Extension Dependencies -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBV72JOytVAAXlvey3kGB-XCu4S5XUxOs" type="text/javascript"></script>
</head>

<body>
  <!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <ul class="nav navbar-nav left">
        <li>
          <a href="http://developer.autodesk.com" target="_blank">
            <img alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20">
          </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="https://github.com/autodesk-forge/forge-extensions" target="_blank">
            <img alt="Autodesk Forge" src="/img/GitHub_Logo.png" height="25">
          </a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- End of navbar -->
  <div class="container-fluid fill">
    <div class="row fill">
      <div class="col-sm-2 fill left_panel">
        <div class="panel panel-default fill">
          <div class="panel-heading" data-toggle="tooltip">
            Sample Models
            <span id="refreshBuckets" class="glyphicon glyphicon-refresh" style="cursor: pointer"></span>
          </div>
          <!-- <button class="btn btn-xs btn-info" style="float: right" id="showFormCreateBucket" data-toggle="modal" data-target="#createBucketModal">
            <span class="glyphicon glyphicon-folder-close"></span> New bucket
          </button> -->
          <div id="appBuckets">
            tree here
          </div>
        </div>
      </div>
      <div class="col-sm-8 fill nopadding">
        <div class="tobegin"><i class="fas fa-arrow-left"></i>&nbsp;&nbsp;Select a model to load viewer and extensions</div>
        <div id="forgeViewer"></div>
      </div>
      <div class="col-sm-2 fill right_panel">

        <div class="panel panel-default fill">
          <h4 class="panel-heading extensions-heading" data-toggle="tooltip">Extensions</h4>
        
          <ul class="nav nav-tabs pl">
            <li class="active"><a data-toggle="tab" href="#custom">Custom</a></li>
            <li><a data-toggle="tab" href="#inbuilt">Built-in</a></li>
          </ul>
        
          <div class="tab-content pl">
            <div id="custom" class="tab-pane fade in active">
              <div id="extensionlist"></div>
            </div>
            <div id="inbuilt" class="tab-pane fade">
              <div id="inbuiltextensionlist"></div>
            </div>
          </div>          
        </div>

      </div>
    </div>
  </div>
  <form id="uploadFile" method='post' enctype="multipart/form-data">
    <input id="hiddenUploadField" type="file" name="theFile" style="visibility:hidden" />
  </form>
  <!-- Modal Create Bucket -->
  <div class="modal fade" id="createBucketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
        </div>
        <div class="modal-body">
          <input type="text" id="newBucketKey" class="form-control"> For demonstration purposes, objects (files)
          are NOT automatically translated. After you upload, right click on
          the object and select "Translate". Note: Technically your bucket name is required to be globally unique across
          the entire platform - to keep things simple with this tutorial your client ID will be prepended by default to
          your bucket name and in turn masked by the UI so you only have to make sure your bucket name is unique within
          your current Forge app.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="createNewBucket">Go ahead, create the bucket</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Edit Config Bucket -->
  <div class="modal fade" id="editConfigModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Edit Extension Options</h4>
        </div>
        <div class="modal-body">
          <textarea type="text" id="editextensionconfig" class="form-control"></textarea> 
          
        </div>
        <div class="modal-footer">
          <span><a id="learnmore" target="_blank" href="">Learn more</a></span>
          <button type="button" class="btn  btn-success" id="saveconfig" data-dismiss="modal" aria-label="Cancel">Apply</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
